<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    @dialog-close="dialogClose"
  >
    <template #searchPanel>
      <el-form
        :inline="true"
        ref="filters"
        :model="filters"
        :rules="rules"
        label-position="right"
        label-width="120px"
        w
      >
        <el-row>
          <el-col :span="24">
            <el-col :span="8">
              <el-form-item
                label="职位名称:"
                prop="roleName"
              >
                <el-input
                  clearable
                  v-model="filters.roleName"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="所属门店:"
                prop="storeId"
              >
                <job-shop
                  v-model="filters.storeId"
                  placeholder="所属门店"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="配件/精品折扣:"
                prop="partsDiscount"
              >
                <el-input
                  clearable
                  v-model.number="filters.partsDiscount"
                />
              </el-form-item>
            </el-col>

          </el-col>

          <el-col :span="24">
            <el-col :span="8">
              <el-form-item
                label="项目折扣:"
                prop="projectDiscount"
              >
                <el-input
                  clearable
                  v-model.number="filters.projectDiscount"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="备注:"
                prop="roleDesc"
              >
                <el-input
                  type="textarea"
                  :rows="2"
                  clearable
                  v-model="filters.roleDesc"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="APP角色">
                <el-select
                  v-model="filters.appCode"
                  placeholder="请选择APP角色"
                  class="w-100"
                >
                  <el-option
                    v-for="item in dict['APP角色']"
                    :key="item.index"
                    :value="item.value"
                    :label="item.text"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col
            :span="24"
            align="right"
          >
            <el-button
              type="primary"
              @click="saveUpdate"
            >保存</el-button>
          </el-col>
        </el-row>

      </el-form>
    </template>

    <template #contentPanel>
      <el-row>
        <el-col :span="20">
          <el-tree
            :data="menuList"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="tree"
            :props="defaultProps"
          >
            <div slot-scope="{ node, data }">
              <span>{{ data.name }}</span>
              <!-- <span>{{ 'router:' + data.menuPath }}</span>
              <span v-if="data.type=='BUTTON'">{{ '按钮权限ID:' + data.id }}</span> -->
              <!-- <span><i class="el-icon-check"></i></span> -->
            </div>
          </el-tree>
        </el-col>
        <el-col :span="4">
          <el-button
            type="success"
            @click="allAuthorization"
          >一键授权</el-button>
          <el-button
            type="danger"
            @click="restCheck"
          >重置</el-button>
        </el-col>
      </el-row>
    </template>
  </base-layout>
</template>

<script>
import {
  addData,
  updateData,
  menuList,
  details
} from '@/api/after-sale/systemManage/role'
import baseMixin from '@/mixins/base'
import { getDict } from '@/utils'
import ElRow from 'element-ui/packages/row/src/row'
import ElCol from 'element-ui/packages/col/src/col'

export default {
  components: { ElCol, ElRow },
  mixins: [
    baseMixin({
    }),
  ],
  data () {
    return {
      menuListDemo: [],
      dict: {},
      menuList: [],
      noFatherId: [],
      filters: {
        roleName: '',
        storeId: '',
        roleDesc: '',
        appCode: '',
        partsDiscount: '',//配件或者精品折扣
        projectDiscount: '',//项目折扣
      },
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      rules: {
        roleName: [{ required: true, message: '请输入', trigger: 'blur' },],
        storeId: [{ required: true, message: '请选择', trigger: 'blur' },],
        partsDiscount: [
          { required: true, message: '请输入', trigger: 'blur' },
          { pattern: /^([1-9]|10)$/, message: '范围在1-10', trigger: 'blur' },
        ],
        projectDiscount: [
          { required: true, message: '请输入', trigger: 'blur' },
          { pattern: /^([1-9]|10)$/, message: '范围在1-10', trigger: 'blur' },],
      },
    }
  },
  watch: {
    menuList: {
      deep: true,
      handler (nv, ov) {
        this.filtersFaterId(nv);
        let meunts = this.filters.menuIds.filter(item => {
          if (this.noFatherId.includes(Number(item))) {
            return item
          }
        })
        this.$refs.tree.setCheckedKeys(meunts)
      }
    }
  },
  async created () {
    this.dict = getDict(['APP角色'])
    this.menuLists()
    let id = this.$route.query.id
    if (id) {
      const { data } = await details(id)
      this.filters = data;
      this.filtersFaterId(this.menuList);
        let meunts = this.filters.menuIds.filter(item => {
          if (this.noFatherId.includes(Number(item))) {
            return item
          }
        })
        this.$refs.tree.setCheckedKeys(meunts)
    }
  },
  methods: {

    restCheck () {
      this.$refs.tree.setCheckedKeys([])
    },
    //一键授权
    allAuthorization () {
      let c = []
      for (let item in this.menuList) {
        c.push(this.menuList[item].id)
      }
      this.$refs.tree.setCheckedKeys(c)
    },
    async menuLists () {
      const { data } = await menuList()
      this.menuList = data
    },
    async saveUpdate () {
      /** 保存*/
      this.filters.menuIds = this.$refs.tree.getCheckedNodes(false, true).map(item => {
        return item.id
      })
      const { success } = this.filters.id
        ? await updateData(this.filters)
        : await addData(this.filters)
      if (success) {
        this.$message({
          message: '操作成功',
          type: 'success',
        })
        this.$router.push({ path: '/systemManage/role' })
      } else {
        this.$message.error('操作失败')
      }
    },
  },
  mounted () { },
}
</script>

<style lang="scss" scoped>
.buttonStyle {
  text-align: center;
}
</style>
